<template>
  <f7-page 
  @page:init="pageInit"
  @page:beforein="pageBeforeIn"
  @page:afterin="pageAfterIn"
  @page:beforeout="pageBeforeOut"
  @page:afterout="pageAfterOut"
  @page:beforeremove="pageBeforeRemove"
  >

    <f7-navbar title="About" back-link="Back"></f7-navbar>

    <f7-list>
      <f7-list-item link="/about/" title="About"></f7-list-item>
      <f7-list-item link="/form/" title="Form"></f7-list-item>
    </f7-list>

    <f7-block-title>About My App</f7-block-title>
    <f7-block strong>
      <p>Here is About page!</p>
      <p>You can go <f7-link back>back</f7-link>.</p>
      <p>Mauris posuere sit amet metus id venenatis. Ut ante dolor, tempor nec commodo rutrum, varius at sem. Nullam ac nisi non neque ornare pretium. Nulla mauris mauris, consequat et elementum sit amet, egestas sed orci. In hac habitasse platea dictumst.</p>
      <p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p>
    </f7-block>
  </f7-page>
</template>

<style lang="less" scoped>


</style>

<script>
import { TweenMax, TimelineMax, CSSPlugin } from "gsap/TweenMax";
import pxToViewport from "../components/utils/px-to-viewport.js"; // px to vw, pxToViewport(375)
var $f7; // Framework7 Object
var $; // Scoped DOM7 selector
var $$; // Global DOM7 selector

export default {

  data() {
    return {
      pageInSecond : 0.4,
      pageOutSecond : 0.4,
      pageInAnimation : true,
      pageOutAnimation : true,
    };
  },

  mounted() {
    var context = this;
    this.$f7ready((f7) => {
      $f7 = f7;
      $ = function(selector) { return f7.$(selector, context.$el); };
      $$ = f7.$;
    });
  },
  
  methods: {

    pageInit(event, page) {
      console.log(page.view.id + ': page init ' + page.route.path);
    },
    pageBeforeIn(event, page) {
      console.log(page.view.id + ': page before in ' + page.route.path);
    },
    pageAfterIn(event, page) {
      console.log(page.view.id + ': page after in ' + page.route.path);
    },
    pageBeforeOut(event, page) {
      console.log(page.view.id + ': page before out ' + page.route.path);
    },
    pageAfterOut(event, page) {
      console.log(page.view.id + ': page after out ' + page.route.path);
    },
    pageBeforeRemove(event, page) {
      console.log(page.view.id + ': page before remove ' + page.route.path);
    }
    
  },

}
</script>
